import React, { Component } from 'react';
import {HallStyled} from './StyledHall'

import { Toast , Modal } from 'antd-mobile'

import UIButton from 'components/UIButton/UIButton'
// import Tabbar from 'components/Tabbar/Tabbar'
import Navigation from 'components/Navigation/Navigation'
import qd from 'images/home/sy_qd_icon@3x.png'
import xsrw from 'images/home/sy_xsrw_icon@3x.png'
import rwfq from 'images/home/sy_rwfq_icon@3x.png'
import fbrw from 'images/home/sy_fbrw_icon@3x.png'
import back from 'images/nav/whiteback@3x.png'




const btnArr = [
  {
    btnImg:qd,
    title:"签到",
    tag:101
  },
  {
    btnImg:xsrw,
    title:"新手任务",
    tag:102
  },
  {
    btnImg:rwfq,
    title:"任务分区",
    tag:103
  },
  {
    btnImg:fbrw,
    title:"发布任务",
    tag:104
  },
]
class Hall extends Component {
  state = { 
    selected: false,
   }
  render() { 
    // console.log(btnArr)
    // window.addEventListener("touchstart", null, {passive: false} );
    return ( 
      <HallStyled>hall

        {/* <UIButton 
        clickButton={this.onClickButton}//点击事件
        selected = {this.state.selected}//是否选择
        width="200px" 
        height="200px"
        padding="20px"
        margin="10px"
        backgroundImage={qd}
        backgroundColor='blue'
        selectedBackgroundImage={xsrw}
        selectedBackgroundColor='red'
        // border='3px solid #000'
        // selectedBorder = '5px solid yellow'
        tag={100}
        borderWidth='0 0 2px 0 '
        borderStyle = 'solid'
        borderColor = '#000'
        
        selectedBorderWidth ='5px'
        selectedBorderStyle = 'double'
        selectedBorderColor = 'yellow'

        borderRadius='35px'
        selectedBorderRadius='15px'

        // borderBottom
        // borderRight
        
        img={fbrw} 
        selectedImg={xsrw} 
        imgWidth = '50px'
        imgHeight = '65px'
        imgRadius="10px"
        selectedImgRadius="20px"
        imgPadding='5px 0 10px'
        imgMargin = '10px 0 20px'
        imgBackgroundColor="green"
        selectedImgBackgroundColor="yellow"
        imgGrow = '0'
        imgShrink = '0'
        imgPosition='top'

        titleWidth = '80px'
        titleHeigh ='20px'
        titleGrow = '0'
        titleShrink = '1'
        titleLineHeight = '12px'
        titlePadding = '4px 0'
        titleTextAlign = 'center'
        title = '发布任务'
        selectedTitle = '取消任务'
        titleColor = '#fff'
        selectedTitleColor = 'black'
        titleSize = '18px'
        selectedTitleSize = '12px'
        titleBackColor = '#ddd'
        selectedTitleBackColor = 'yellow'    
        titleWordWrap = {true}
          
        >
          <p>aaa</p>
        </UIButton> */}

        <UIButton
        border='1px solid #333'
        
        width= "1rem"
        height = '.5rem'
        title="测试"></UIButton>

        <UIButton
        backgroundColor = 'blue'
        title="测试2"></UIButton>
        

        <UIButton
        width= '50px'
        img={fbrw} ></UIButton>

        <UIButton
        width='50px'
        height='50px' 
        titleTextAlign="right"
        title="测试3"></UIButton>

        <div>----</div>

        {
          btnArr.map((value,index)=>(
            <UIButton key={index}

            // 组件内部传参,外部该参数为箭头函数
            // clickButton={this.onClickButton}

            // 调用时传参，传入箭头函数
            clickButton={()=>this.onClickButtons(value.tag)}
            imgPosition = 'top'
            imgMargin = '.25rem 0 .05rem'
            width = '25%'
            height = "1.05rem"
            tag ={value.tag}
            titleTextAlign = "center"
          
            titleHeigh = ".24rem"
            titleWidth = '100%'
            title={value.title}
            titleColor = "#646464"
            titleSize = "13px"
            imgWidth = '.45rem'
            imgHeight = '.45rem'
            img ={value.btnImg}
            ></UIButton>
          ))
        }
        <div>----</div>

        <Navigation
        // showStatusBar = {true}
        // statusBarHeight= '20px'
        // statusBarColor = '#56D9D1'

        backgroundColor = '#56D9D1'
        // backgroundImage = {qd}
        // navHeight = '60px'
        title = "nav"
        titleColor = '#fff'
        titleSize = '.3rem'

        // leftWidth='50px'
        leftHeight='30px'
        leftPadding = '0 0 0 .05rem'
        leftMargin = '0 0 0 .05rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        leftImgHeight = '.2rem'
        leftTitle = 'left'
        leftBackgroundColor = "red"
        leftTitleColor = '#fff'
        leftTitleSize = '.2rem'
        leftRadius = '.05rem'
        clickLeft = {()=>this.onClickLeft("left")}

        rightWidth='50px'
        rightHeight='30px'
        rightPadding = '0'
        rightMargin = '0 10px 0 0'
        // rightImg = {back}
        rightImgWidth = '.2rem'
        rightImgHeight = '.2rem'
        rightTitle = 'right'
        rightBackgroundColor = "red"
        rightTitleColor = '#fff'
        rightTitleSize = '.2rem'
        rightRadius = '.05rem'
        clickRight = {()=>this.onClickRight('Right')}
        ></Navigation>

        <Navigation
        
        title = "任务详情"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}

        ></Navigation>

<Navigation
        
        title = "任务详情"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}

        ></Navigation>

<Navigation
        
        title = "任务详情"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}

        ></Navigation>

        

      <div></div>

      </HallStyled> 
    );
  }
  onClickLeft(tag){
    console.log(this.props)
    this.props.history.go(-1)
    console.log(tag);
    Toast.info(tag+"返回",  3, ()=>{console.log("隐藏后进回调")}, false);

    
  }
  onClickRight(tag){
    // console.log(tag);
    // Toast.info(tag,  2, ()=>{console.log("回调")}, true);



    
  }
 

  onClickButtons(tag){
    console.log(tag)
    // Toast.info(tag,  2, ()=>{console.log("回调")}, true);
    Modal.alert('警告框', '确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作确定操作？', [
      { text: '关闭', onPress: () => {console.log("guanbi")}},
      { text: '确认', onPress: () => {console.log("queren")}},
      // { text: '想想', onPress: () => console.log('想想') },
    ]);
  }



  onClickButton = (tag)=>{ 
    Toast.info(tag,  2, ()=>{console.log("回调")}, true);

    console.log(tag,this.state.selected); 
    this.setState({selected:!this.state.selected})
    // this.setState({},function回调)
    // 方法异步，虚拟dom机制
    // react 中父视图rander子视图一定进行，vue值改变才rander
   
  }
}
 
export default Hall;